<!--
 * @Author: 涵崽
 * @Date: 2023-12-06 17:05:48
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-12-06 17:38:46
 * @Description: 微信：1045654

 面试官问我东西，我可以把我写的东西直接给他看
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>苹果网站效果</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <video src="./video.webm"></video>
      <div class="txt-item">
        收拾收拾<span>安神定惊</span>啊啥的就安排考试就看到
      </div>
      <div class="txt-item">
        <div class="line"></div>
        <div class="txt">
          收拾挖多少啊挖收拾<span>今晚亲爱</span>啊我啤酒打算靠谱的就骂我打算
        </div>
      </div>
      <div class="txt-item">
        <div class="line"></div>
        阿萨德爱我<span>大挖是的安慰我的鞍山</span>大伟大是的啊喂噶是非法的多少啊我
      </div>
      <div class="txt-item">
        大手大脚阿姐的<span>去鸡皮我</span>请问马屁的就是阿婆说大家爱我单子
      </div>
    </div>
    <script>
      // 原理,一个视频,根据滚动距离与整个body高度的比值 设置 对应视频的当前播放位置
      const videoEl = document.querySelector("video");
      const textItems = document.querySelectorAll(".txt-item");
      let duration = 0; //视频总时长

      videoEl.load(); //刚开始就让视频重新加载一下,有些时候会因为没加载导致下面的事件没触发

      videoEl.addEventListener("durationchange", function (e) {
        duration = videoEl.duration;
      });
      function showTxt(percent) {
        textItems.forEach(dom => {
          dom.className = "txt-item";
        });
        // 当时长到百分之几时,对应的文字出现,这个随便调
        if (percent > 5 && percent <= 33) {
          textItems[0].className = "txt-item active";
        } else if (percent > 45 && percent <= 58) {
          textItems[1].className = "txt-item active";
        } else if (percent > 69 && percent <= 85) {
          textItems[2].className = "txt-item active";
        } else if (percent > 90) {
          textItems[3].className = "txt-item active";
        }
      }
      function updateCurentTime() {
        // 滚动的距离占总高度的多少,那当前时间就是总时长的多少 比如滚动的距离占body的50%,那么当前的时间就是总时长的50%
        const percent =
          Math.ceil(window.scrollY) /
          (document.body.offsetHeight - window.innerHeight);
        videoEl.currentTime = duration * percent;

        showTxt(percent * 100);
      }
      document.addEventListener("scroll", updateCurentTime);
    </script>
  </body>
</html>
